<template>
<view class="container">
   <view class="header"><image :src="topImage"></image></view>
   <view class="timeLsit">
      <scroll-view class="scroll-view_x" scroll-x scroll-with-animation :scroll-left="scrollLeft" style="width:auto;overflow:hidden;height:106rpx;">
         <block v-for="(item, index) in timeList" :key="index">
            <view @tap="setTimeList" :class="'item ' + (active == index?'on':'')" :data-index="index" :data-stop="item.stop">
               <view class="time">{{item.time}}</view>
               <view>{{item.state}}</view>
            </view>
         </block>  
      </scroll-view>  
   </view>
   <view class="countDown font-color acea-row row-center-wrapper">
      <view v-if="status == 1">
       <text class="text">还剩</text>
       <text class="num">{{countDownHour}}</text> : 
       <text class="num">{{countDownMinute}}</text> : 
       <text class="num">{{countDownSecond}}</text>
      </view>
      <view v-else-if="status == 2"><text class="text">即将开始</text></view>
      <view v-if="status == 0"><text class="text">已结束</text></view>       
   </view>
   <view class="list">
     <block v-for="(item, index) in seckillList" :key="index">
      <view class="item acea-row row-between-wrapper" :data-id="item.id" :data-goodsId="item.goodsId" :data-seckillprice="item.seckillPrice" @tap="goDetails">
         <view class="pictrue"><image :src="item.picUrl"></image></view>
         <view class="text acea-row row-column-around">
            <view>{{item.brief}}</view>
            <view class="price priceTg">
                 <view class="money jhx_f8">秒杀价<text class="num font-color">￥{{item.seckillPrice}}</text></view>
                 <view class="retailMoney jhx_f9">原价<text class="num font-color">￥{{item.retailPrice}}</text></view>
                </view>
            <view class="progress cart-color" v-if="item.seckillStatus == 1" :data-id="item.seckillId" @tap.stop="goDetails">
              <view class="bg-red" :style="'width:' + item.percent + ';'"></view>
              <view v-if="item.percent == '100%'" class="white_font piece">仅剩{{item.leftNumber}}件</view>
              <view v-else class="piece font-color">仅剩{{item.leftNumber}}件</view>
            </view>
            <view class="progress cart-color" v-else-if="item.seckillStatus == 10 ||item.seckillStatus == 0">
              <view class="bg-red" style="width:0%;"></view>
              <view class="piece font-color">未开始</view>
            </view>
            <view class="progress cart-color" v-else>
              <view class="bg-red" style="width:100%;"></view>
              <view class="piece font-color">已抢完</view>
            </view>
         <view class="grab button" v-if="item.seckillStatus == 1" :data-id="item.seckillId">马上抢</view>
         <view class="grab bg-color" v-else-if="(item.seckillStatus == 0 || item.seckillStatus == 10) && item.tiped != 1">提醒我</view>
         <view class="grab bg-tiped" v-else-if="(item.seckillStatus == 0 || item.seckillStatus == 10) && item.tiped == 1">已提醒</view>
         <view class="grab bg-color" v-else>已结束</view>
         </view>
      </view>
     </block>
     <view class="nonlist" v-if="seckillList.length==0">
      <text class="text">抱歉该时间段秒杀商品木有了!</text>
     </view>
   </view>
</view>
</template>

<script>
import wxh from '../../utils/wxh.js';
const util = require("../../utils/util.js");
const api = require("../../config/api.js");
const app = getApp();

export default {
  data() {
    return {
      isload: false,
      topImage: "/static/static/images/seckillTop.jpg",
      parameter: {
        'navbar': '1',
        'return': '1',
        'title': '限时秒杀',
        'color': false
      },
      seckillList: [],
      timeList: [],
      active: 1,
      currShouldActive: 1,
      scrollLeft: 0,
      interval: 0,
      status: 1,
      countDownHour: "00",
      countDownMinute: "00",
      countDownSecond: "00",
      page: 1,
      limit: 20,
      loading: false,
      loadend: false,
      pageLoading: false,
      offset: 0
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (e) {
    this.getSeckillConfig();
    this.setData({
      isload: true
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    let that = this;

    if (!that.isload) {
      that.getSeckillList();
    }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    if (this.interval) {
      clearInterval(this.interval);
      this.setData({
        interval: null
      });
    }
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},
  methods: {
    goDetails: function (e) {
      let that = this;
      that.setData({
        isload: false
      });
      let seckillId = e.currentTarget.dataset.id;
      let goodsId = e.currentTarget.dataset.goodsid;
      let isSeckill = true;
      let seckillDoing = that.currShouldActive == that.active ? 1 : 0;
      uni.navigateTo({
        url: '/pages/goods/goods?id=' + goodsId + "&isSeckill=" + isSeckill + '&seckillId=' + seckillId + "&seckillDoing=" + seckillDoing
      });
    },
    // 当在没有结束时点击显示原来的顺序 ，当时间结束后点击该顺序排第一位
    setTimeList: function (e) {
      let that = this;
      that.setData({
        active: e.currentTarget.dataset.index
      });

      if (that.interval) {
        clearInterval(that.interval);
        that.setData({
          interval: null
        });
      }

      let stop = e.currentTarget.dataset.stop;
      wxh.time(stop, that.timeList[that.currShouldActive].stop, that);
      that.setData({
        status: that.timeList[that.active].status,
        loadend: false,
        page: 1
      }); // 当到达这个时间了需要重置

      that.getSeckillList();
    },
    getSeckillConfig: function () {
      let that = this;
      let data = {};
      util.request(api.SeckillIndex, data, 'GET').then(res => {
        that.setData({
          timeList: res.data.seckillTime,
          active: res.data.seckillTimeIndex,
          currShouldActive: res.data.seckillTimeIndex
        });

        if (that.timeList.length) {
          wxh.time(that.timeList[that.active].stop, that.timeList[that.currShouldActive].stop, that);
          that.setData({
            offset: 0,
            status: that.timeList[that.active].status
          });
          that.getSeckillList();
        }
      });
    },
    getSeckillList: function () {
      let that = this;
      let index = that.active;
      let timeId = null;

      if (that.timeList.length == 0) {
        timeId = index;
      } else {
        timeId = that.timeList[index].id;
      }

      let data = {
        timeId: timeId
      };
      that.setData({
        pageLoading: true
      });
      util.request(api.SeckillList, data, 'GET').then(res => {
        let seckillList = that.seckillList;
        let loadend = seckillList.length < that.limit;
        that.page++;
        that.setData({
          seckillList: res.data,
          offset: that.page,
          pageLoading: false,
          loadend: loadend
        });
      }).catch(err => {
        that.setData({
          pageLoading: false
        });
      });
    },
    subscribeSeckillMsg: function (id, status) {
      let that = this;
      util.request(api.SubscribeSeckill, {
        id: id,
        status: status
      }).then(function (res) {
        if (res.errno === 0) {
          var seckillList = that.seckillList;
          seckillList.forEach(element => {
            if (element.seckillId == id) {
              element.tiped = 1;
            }
          });
          that.setData({
            seckillList: seckillList
          });
        }
      });
    },
    subscribeMsg: function (e) {
      let that = this;
      let templateId = api.SeckillSubTemplateId;
      uni.requestSubscribeMessage({
        // 相当于询问用户愿不愿意接收这个模板的订阅消息	
        tmplIds: [templateId],

        success(res) {
          if (res[templateId] == 'accept') {
            let id = e.currentTarget.dataset.id;
            let status = e.currentTarget.dataset.status; //==================添加需要提醒的记录=====================

            that.subscribeSeckillMsg(id, status);
          }
        },

        complete(res) {
          console.log(res);
        }

      });
    }
  }
};
</script>
<style>
page{background-color:#fff!important;}
.container .header{width:100%;height:240rpx;}
.container .header image{
  width:100%;
  height:100%;
  top: 0;
  left: 0;
}
.container .timeLsit{width:100%;white-space:nowrap;}
.container .timeLsit .item{display:inline-block;font-size:22rpx;color:#282828;width:200rpx;text-align:center;padding:11rpx 0;box-sizing:border-box;height:96rpx;background-color:#efc58f;}
.container .timeLsit .item~.item{border-left:1rpx solid #e3b06e;}
.container .timeLsit .item .time{font-size:32rpx;font-weight:bold;}
.container .timeLsit .item.on{background-color:#e93323;color:#fff !important;position:relative;}
.container .timeLsit .item.on view{color:#fff !important;}
.container .timeLsit .item.on::before{content:"";width: 0;height: 0;border-left: 8rpx solid transparent;border-right: 8rpx solid transparent;border-top:10rpx solid #e93323;position:absolute;bottom:-9rpx;z-index:99;left:50%;transform:translateX(-50%);}
.container .countDown{height:92rpx;border-bottom:1rpx solid #f0f0f0;margin-top:-14rpx;font-size:28rpx;color:#282828;}
.container .countDown .num{font-size:28rpx;font-weight:bold;background-color:#ffcfcb;padding:4rpx 7rpx;border-radius:3rpx;}
.container .countDown .text{font-size:28rpx;color:#282828;margin-right:13rpx;}
.container .list .item .pictrue{width:166rpx;height:166rpx;}
.container .list .item .pictrue image{width:100%;height:100%;border-radius:6rpx;}
.container .list .item .text{width:500rpx;font-size:30rpx;color:#333;height:166rpx;}
.container .list .item .text .money{font-size:24rpx;color:#282828;}
.container .list .item .text .money .num{font-size:34rpx;font-weight:bold;}
.container .list .item .text .progress {overflow: hidden;background-color:#fff;width:260rpx;border-radius:20rpx;height:34rpx;line-height: 34rpx;position:relative;}
.container .list .item .text .progress .bg-red{width: 0;height: 100%;transition: width 0.6s ease;background-color: #f50017;}
.container .list .item .text .progress .piece{position:absolute;left:40%;transform:translate(-50%,-50%);top:49%;font-size:22rpx;}
.container .list .item .grab{font-size:28rpx;color:rgb(228, 228, 228);width:140rpx;height:54rpx;border-radius:4rpx;text-align:center;line-height:54rpx;position:absolute;right:30rpx;bottom:30rpx;}
.bg-color{background-color:#e93323!important;}
.container .list .item .button {
  float: right;
  padding-right: 20rpx;
  padding: 5px;
  line-height: 35rpx;
  background: hsl(7, 93%, 47%);
  border-radius: 10rpx;
  color: rgb(228, 228, 228);
  margin: 0rpx;
  text-align: center;
  width: 20%;
}
view{box-sizing:border-box;}
.acea-row.row-between-wrapper {
  align-items: center;
  justify-content: space-between;
  }  
  .acea-row {
    display: flex;
    flex-wrap: wrap;
  }
  .acea-row.row-column-around {
    flex-direction: column;
    justify-content: space-around;
    }
    .line1 {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      }
      .cart-color {
        color: #ff3700!important;
        border: 1px solid #ff3700!important;
      }
      .bg-tiped{
        background-color: #b9a09e!important;
        color:#fff !important;
      }

    .container .list .item .text .price {
      width: 476rpx;
      display: flex;
      line-height: 40rpx;
    }

    .container .list .item .text .retailMoney{
      font-size:24rpx;
      margin-left: 30rpx;
      text-decoration: line-through;
      width: 40%;
    }
    .container .list .item{
      position:relative;
      border-top: 1px solid #d9d9d9;
      margin: 0 20rpx;
      padding-top: 10rpx;
      height: 264rpx;
      vertical-align: middle;
      width: 710rpx;
    } 


    .container .list .nonlist{
      line-height: 100rpx;
      text-align: center;
    } 

    .container .list .nonlist .text{
      color: #888;
      font-size: 30rpx;
    } 
</style>